<template>
  <view>
    <view class="uni-margin-wrap">
      <swiper class="swiper" :next-margin="next+'rpx'" :previous-margin="previous+'rpx'"
              :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
              @change="change">
        <swiper-item v-for="(item,index) in list" :key="index">
          <view class="swiper-item">
            <view style="color: aliceblue;position: absolute;top: 40rpx;left: 30rpx;">
              <p>{{item.cardTitle}}</p>
            </view>
            <view style="color: aliceblue;position: absolute;bottom: 40rpx;left: 30rpx;">
              <p>￥{{item.price}}/{{item.frequency}}天</p>
            </view>
            <view
                style="color: aliceblue;position: absolute;bottom: 40rpx;right: 30rpx;font-size: 24rpx;">
              <p>购买后{{item.term}}天内有效</p>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
import {
  cardList,
  payCard
} from '@/config/api.js'
export default {
  data() {
    return {
      indicatorDots: false,
      autoplay: false,
      interval: 2000,
      duration: 500,
      next: 80,
      previous: -20,
      list: [],
      tabs: [{
        name: '卡券内容'
      }],
      activeStyle: {
        color: '#006737',
        fontWeight: 'bold'
      },
      card: {
        title: '',
        money: 0,
        frequency: 0,
        term: 0,
        area: 0,
        areaTitle: ''
      }
    }
  },
  mounted(){
    this.getCardList()
  },
  methods: {
    change(e) {
      var current = e.detail.current
      const that = this
      this.card = this.list[current]
      console.log(current)
      if (current == 0) {
        setTimeout(function() {
          that.next = 80
          that.previous = -20
        }, 500);

      } else if (current == this.list.length - 1) {
        this.next = 58
        this.previous = 40
      }
    },
    async getCardList() {
      const {
        data: res
      } = await cardList()
      console.log('获取优惠卡列表', res)
      this.list = res
      if (res.length > 0) {
        this.card = res[0]
      }
    }
  },
  onLoad() {
    this.getCardList()
    console.log(this.card,'bbbbbb------')
  }
}
</script>

<style lang="scss">
.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
  margin: 40rpx auto;
  margin-left: 20rpx;
}

.swiper {
  height: 300rpx;
}

.card-text {
  margin: auto 40rpx;
  padding: 30rpx 30rpx;
  background-color: $u-bg-color;
}

.card-button {
  margin: 40rpx;
}
</style>
